<template>
  <div>
    <div class="login_wrap">
      <a-tabs defaultActiveKey="0" @change="callback">
        <a-tab-pane
          :key="item.key"
          :tab="item.tab"
          v-for="item in data"
          forceRender
        >
          <LoginForm ref="user" :loginState="loginState"></LoginForm>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import LoginForm from "@/components/Login/LoginForm";
export default {
  data() {
    return {
      loginState: "user",
      data: [
        { key: "0", tab: "学生实习管理" },
        { key: "1", tab: "教师实践管理" },
      ],
    };
  },
  methods: {
    callback(key) {
      //切换tab标签页时重置表单
      this.$refs.user[key].resetForm();
      this.loginState = key == "0" ? "user" : "admin";
    },
  },
  components: {
    LoginForm,
  },
};
</script>

<style lang="less">
.login_wrap {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  margin-top: -8%;

  .ant-tabs {
    width: 20%;
    border: 1px solid #ccc;
    box-shadow: 5px 5px 5px #888888;
  }
}
</style>